"use client";
import { Category, GameListRep } from "@/api/home";
import SwiperGroup from "@/components/Card/SwiperGroup";
import { useRouter } from "@/i18n/routing";
interface Props {
    groupGames: Category[];
    // group: GroupType[];
}

const Manufacturer = (props: { data: GameListRep[]; group: Category }) => {
    const router = useRouter();
    const { data, group } = props;
    const todoHandler = (item: GameListRep) => {
        // router.push(`/gameList/?gameListFlag=${item.id}&type=${group.type}`);
        router.push({
            pathname: `/gameList/?gameListFlag=${item.id}&type=${group.type}`,
        });
    };
    const elements = data.map((item, index) => {
        return (
            <img
                key={index}
                className={"rounded-[0.05rem]"}
                onClick={() => todoHandler(item)}
                src={item.game_icon}
                alt=""
            />
        );
    });

    return <div className={"grid grid-cols-4 gap-x-2 gap-y-2"}>{elements}</div>;
};

const HomeGames = (props: Props) => {
    const router = useRouter();
    const { groupGames = [] } = props;
    const todoHandler = (item: Category) => {
        router.push(`/gameList/?gameListFlag=${item.jump_id}&type=${item.type}`);
    };
    return (
        <>
            {groupGames.map((group, index) => {
                if (group.type !== 2) {
                    return (
                        <SwiperGroup
                            key={index}
                            group={group}
                            col={3}
                            visibleTodos={true}
                            todoHandler={todoHandler}
                        ></SwiperGroup>
                    );
                } else {
                    // 厂商
                    return (
                        <SwiperGroup
                            key={index}
                            group={group}
                            page={4}
                            visibleTodos={false}
                            todoHandler={todoHandler}
                            slideRender={(data) => <Manufacturer data={data} group={group} />}
                        ></SwiperGroup>
                    );
                }
            })}
        </>
    );
};

export default HomeGames;